import React,{Component} from 'react'
import * as pub from '../../config/public';
//import{formatTimestamp} from '../../config/public';
import * as fetch from '../../config/fetch';
import $ from 'jquery'
import { message,Spin } from 'antd';
import {Link,browserHistory} from 'react-router'
import Layer from '../Layer'
class RadioList extends Component {
	constructor(args) {
		super();
		this.state = {
			single:[]
		}
	}
	componentWillReceiveProps(nextProps) {
		this.setState({
			single: nextProps.single
		}, () => {

			// $('.radio-test-online').each(function(i) {
			// 	let answer = pub.getAnswer(nextProps.single[i].answer);
			// 	$(this).find("input[type='radio']").each((index, el) => {
			// 		for (let x of answer) {
			// 			if (x === index) {
			// 				el.checked = true;
			// 			}
			// 		}
			// 	})
			// })
		})
	}
	render(){
		return(
			<div className="topic radio-topic mar-b-20">
				        {
                           this.state.single.length===0?null:<h3>单项选择题：</h3>
				        }
						{this.state.single.map((item,index)=>{
							return(
						           <dl key={index} className='radio-test-online'>
						           	<dt>{index+1}、{item.title}</dt>
						           	<dd><label><input className="describeA" type="radio" name={'radio' + index}/>A. {item.A}</label></dd>
						           	<dd><label><input className="describeB" type="radio" name={'radio' + index}/>B. {item.B}</label></dd>
						           	<dd><label><input className="describeC" type="radio" name={'radio' + index}/>C. {item.C}</label></dd>
						           	<dd><label><input className="describeD" type="radio" name={'radio' + index}/>D. {item.D}</label></dd>
						           </dl>
								)
						})}

			</div>
			)
	}
}
class MultiselectList extends Component {
	constructor(args) {
		super();
		this.state = {
			multiple:[]
		}
	}
	componentWillReceiveProps(nextProps) {
		this.setState({
			multiple: nextProps.multiple
		}, () => {
			
			// $('.check-test-online').each(function(i) {
			// 	let answer = pub.getAnswer(nextProps.checkbox[i].answer);
			// 	$(this).find("input[type='checkbox']").each((index, el) => {
			// 		for (let x of answer) {
			// 			if (x === index) {
			// 				el.checked = true;
			// 			}
			// 		}
			// 	})
			// })
		})
	}
	render(){
		return(
			<div className="topic check-topic">
				        {
                           this.state.multiple.length===0?null:<h3>多选选择题：</h3>
				        }
						{this.state.multiple.map((item,index)=>{
							return(
						           <dl key={index} className='check-test-online'>
						           	<dt>{index+1}、{item.title}</dt>
						           	<dd><label><input className="describeA" type="checkbox" />A. {item.A}</label></dd>
						           	<dd><label><input className="describeB" type="checkbox" />B. {item.B}</label></dd>
						           	<dd><label><input className="describeC" type="checkbox" />C. {item.C}</label></dd>
						           	<dd><label><input className="describeD" type="checkbox" />D. {item.D}</label></dd>
						           </dl>
								)
						})}

			</div>
			)
	}
}
class Random extends Component {
	constructor(args) {
		super()
		this.state = {
			loading:false,
			showLayer:false,
			point:0,
			randomPaperId:34,
			single:[],
			multiple:[],
		}
	}
	componentWillMount(){
		this.random()
	}
	random(){
		this.setState({
			loading: true
		});
		fetch.SeeQuestion({randomPaperId:this.props.params.id}).then((data) => {
			if (data.result === 'RC100') {
				let single=[],multiple=[];
				for(let x of data.titleList){
					if(x.titleType === '1'){
						single.push(x);
					}else{
						multiple.push(x);
					}
				}
				this.setState({
					loading: false,
					single,
					multiple,
				});
			} else {
				
				pub.jumpHistory.push('/NewsCenter');
				message.error(data.errMsg, 3);
			}
			this.setState({
				loading: false
			});
		},(res) => {
				pub.reject(res);
				this.setState({
					loading: false
				});
		})
	}
	submit() {
		// pub.loading(this,true);
		let radioTitles = [];
		let checkboxTitles = [];
		$('.radio-test-online').each((i,element)=> {
			let checkboxList = $(element).find("input[type='radio']");
			let answer = 0;
			checkboxList.each((index, el) => {
				if (el.checked) {
					switch (index) {
						case 0:
							answer += 1;
							break;
						case 1:
							answer += 2;
							break;
						case 2:
							answer += 4;
							break;
						case 3:
							answer += 8;
							break;
						default:
							break;
					}
				}
			})
			
			radioTitles.push({
				radioTitleType:'1',
				radioAnswer:answer,
				randomtestId:this.state.single[i].randomtestId
			})
		})
		$('.check-test-online').each((i, element)=> {
			let checkboxList = $(element).find("input[type='checkbox']");
			let answer = 0;
			checkboxList.each((index, el) => {
				if (el.checked) {
					switch (index) {
						case 0:
							answer += 1;
							break;
						case 1:
							answer += 2;
							break;
						case 2:
							answer += 4;
							break;
						case 3:
							answer += 8;
							break;
						default:
							break;
					}
				}
			})
			checkboxTitles.push({
				checkboxTitleType:'2',
				checkboxAnswer:answer,
				randomtestId:this.state.multiple[i].randomtestId
			})
		})
          
		let randomExamPaperData = {
			randomPaperId: this.props.params.id,
		}
		//console.log(JSON.stringify(randomExamPaperData));
		let formData = new FormData();
		formData.append('randomExamPaperData', JSON.stringify(randomExamPaperData))
		formData.append('radioTitles', JSON.stringify(radioTitles));
		formData.append('checkboxTitles', JSON.stringify(checkboxTitles));
		fetch.submitRandomScore(formData).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					point: data.answerScore,
					showLayer:true

				})
			} else {
				this.setState({
					showLayer:true,
					point: data.answerScore
				})
			}
            pub.loading(this,false);
		}, (res) => {
			pub.reject(res);
			pub.loading(this,false);
		})
	}
	render(){
		return(
			<div className="wrapper bg-F0F4F6">
				<Spin spinning={this.state.loading} tip="加载列表中...">
			        <div className="panel-120 bg-FFFFFF box-shadow">
						<RadioList single={this.state.single} />
						<MultiselectList multiple={this.state.multiple} />
						<div className="row submit-btn mar-b-20 mar-t-20 text-center">
							<button className="btn btn-blue" onClick={()=>this.submit()}>提交</button>
						</div>
			        </div>
		        </Spin>
	            <Layer 
		         title = "答题成功"
		         show={this.state.showLayer} 
		         hide={()=>{this.setState({showLayer:false},()=>{pub.jumpHistory.push('/NewsCenter')})}}
		         width="500px"
		         height="280px"
		        >
		               <div className="row">
							<div className="pop-box-1">
								<div><i className="icon-ok-sign"></i></div>
								<h2>恭喜您，已经完成本次答题！</h2>
								<p>本次答题成绩为：<span>{this.state.point}</span>分</p>
							</div>
							<div className="pop-btn">
								<Link to="NewsCenter" className="btn btn-blue">信息中心</Link>
								<a className="btn btn-blue" onClick={()=>{window.history.back();}}>再次答题</a>
							</div>
						</div>
		
		        </Layer>
			</div>
						
					
			)
	}
}

export default Random
